<script lang="ts" setup>
import type {LoginType} from "~/interfaces";
import {ElIconRefresh} from "#imports";
import {onMounted} from "vue";

useSeoMeta({
  title: '蓝名网-域名数字化交易平台',
  keywords: '域名注册，老域名,域名,域名查询,域名拍卖,域名买卖,域名交易,域名管理，域名投资',
  description: '蓝名网(lanming.cc)一流的数字化交易平台，涵盖了域名注册、域名拍卖、域名投资、域名买卖交易，域名续费管理等。蓝名网致力于打造最好的域名数字化交易平台，投资域名实现最大价值，尽在蓝名网！',
})
useHead({
  meta: [{
    name: 'viewport',
    content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover',
  }],
  script: [{src: 'https://hm.baidu.com/hm.js?f6bbabf969a185c0b3a30f832ccff1bf'}]
})

let navs = ref([
  {
    name: '首页',
    path: '/index.html',
  },
  {
    name: '域名查询',
    path: '/domains.html',
  },
  {
    name: '域名注册',
    path: '/register.html',
  },
  {
    name: '一口价',
    path: '/once.html',
  },
  {
    name: '代卖域名',
    path: '/agent.html',
  },
  {
    name: '域名资讯',
    path: '/notice.html?type=30&is_up=1',
  },
])
const useLogin = useLoginStore();
const router = useRouter()
const route = useRoute()
const login = (loginType: LoginType) => {
  if (loginType == 'register') {
    if (route.path != '/reg.html') {
      router.push({path: '/reg.html', params: {from: route.path}})
    }
  } else {
    useLogin.setLoginType(loginType)
    useLogin.setVisible(true)
    useLogin.setIsAdmin(false)

  }
}
const watchId=ref()
onMounted(() => {
  watchId.value=watch(() => route.path, () => {
    useLogin.refreshInfo();
  })
})

onUnmounted(() => {
  watchId.value&&watchId.value?.()
})
</script>

<template>
  <div>
    <div class="content-box">
      <div class="content">
        <div class="left">
          <div class="no-login-status flex" v-if="!useLogin?.info?.id">
            <span class="login leftItem split" @click="login('login')">账号登陆</span>
            <span class="register leftItem ml-3 text-[var(--el-color-primary)]"
                  @click="login('register')">新用户注册</span>
          </div>
          <div class="login-status flex" v-else>
            <el-space size="small" spacer="|">
              <el-button text><span>ID: {{ useLogin.info.id }}</span></el-button>
              <el-button text><span>用户名: {{ useLogin.info.real_name }}</span></el-button>
              <template v-if="!useLogin.isAdmin">
                <el-button text><span>总金额: {{ useLogin.isSecret ? '***' : useLogin.info?.total_money ?? 0 }}</span>
                </el-button>
                <el-button text>
                  <span>冻结金额: {{ useLogin.isSecret ? '***' : useLogin.info?.frozen_money ?? 0 }}</span></el-button>
                <div><span class="flex items-center">可用余额: {{ useLogin.isSecret ? '***' : useLogin.info?.money }} <ElIconRefresh @click="useLogin.refreshInfo" class="w-5 h-5 ml-1"/></span>
                </div>
              </template>

              <el-button text>
                <NuxtLink :to="useLogin.isAdmin?'/backend/user':'/admin/user'"><span>管理</span></NuxtLink>
              </el-button>
              <el-button text @click="useLogin.loginOut"><span>退出</span></el-button>
            </el-space>
          </div>
        </div>
        <div class="right">

        </div>
      </div>
    </div>
    <div class="content-box nav">
      <div class="content">
        <div class="left">
          <div class="flex">
            <div class="logo">
              <NuxtLink to="/index.html"><img src="~/assets/imgs/logo.jpg" alt="logo" class="logo-img"></NuxtLink>
            </div>
            <div v-for="nav in navs" :key="nav" class="nav-item-box"
                 :class="{active:route.path=='/'?route.path==nav.path:nav.path.includes(route.path)}">
              <el-dropdown>
                <nuxt-link :to="nav.path">
                  <span class="nav-item">{{ nav.name }}</span>
                </nuxt-link>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="item in nav?.children" :key="item">
                      <nuxt-link to="" class="link-item">
                        高PR域名
                      </nuxt-link>

                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>

              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="right">
          <NuxtLink :to="useLogin.isAdmin?'/backend/user':'/admin/user'" class="h-full" v-if="useLogin.info.id">
            <el-button class="mt-4">管理中心</el-button>
          </NuxtLink>
          <div v-else class="mt-2.5">
            <NuxtLink>
              <el-button @click="login('login')">登录</el-button>
            </NuxtLink>
            <NuxtLink class="ml-2">
              <el-button @click="login('register')">注册</el-button>
            </NuxtLink>
          </div>

        </div>
      </div>
    </div>
  </div>
  <LoginOrRigister></LoginOrRigister>
  <ConcatFloat></ConcatFloat>
</template>

<style lang="scss" scoped>
.content-box {
  min-width: 1200px;
  height: 35px;

  &.nav {
    background-color: var(--el-color-primary);
    height: 56px;
  }

  background-color: var(--el-color-white);
}

.content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 35px;
  color: var(--el-color-black);
}

.leftItem {
  display: inline-block;
  padding-right: 11px;
  position: relative;

  &.split::after {
    position: absolute;
    content: "";
    top: 12px;
    right: 0;
    width: 1px;
    height: 12px;
    background-color: var(--el-color-black);
  }
}

.logo {
  width: 50px;
  margin-top: 12px;
  margin-right: 10px;
}

.nav-item {
  font-size: 14px;
  line-height: 56px;
  padding: 0 20px;
  color: white;
}

.nav-item-box {
  &:hover, &.active {
    background-color: var(--el-color-primary-dark-2);
    outline: none;
  }
}

.link-item {
  &:hover {
    border-bottom: 1px solid;
  }
}

</style> 